<template>
	<div>
		<div class="banner-manage-title">
			<div class="title-left">添加BANNER</div>
		</div>
		<el-form ref="form" class='banner-form' :model="form" label-width="120px">
			<el-form-item label="建筑物:" style='width:50%'>
			    <el-select class='building-select' v-model="form.build" placeholder="建筑物">
				    <el-option
				      v-for="item in form.building"
				      :key="item.buildIdStr"
				      :label="item.buildName"
				      :value="item.buildIdStr">
				    </el-option>
				 </el-select>
			</el-form-item>
			<el-form-item label='banner名称:'>
				<el-input required v-model="form.name" class='content-val'></el-input>
			</el-form-item>	
			<el-form-item label='banner上传:'>
				<div style="overflow:hidden">
				<div v-show='bannerVisible' style='float:left;margin-right:10px'>
              		<img ref='imgList' style='display:inline-block;' width="100" height="100" :src="posterimg" alt="" @click='showDialog'>
          		</div>
				<el-upload 
				style='float:left;'
	             class='upload-img'
	              :action="RTRoot+'/marketweb/img/uploadImg?width=600&height=300'"
	              :show-file-list='false'
	              :before-upload='handleBeforePost'
	              :on-success='handleSuccess'>
	              <i class="el-icon-plus"></i>

            	</el-upload>
            	<div style="display:inline-block;padding-top:70px;padding-left:10px;color:#f00;font-size:14px;">*只能上传jpg，且不超过1M</div>
            	</div>
          		<el-dialog v-model="dialogVisible" size="tiny">
				  <img ref='imgList'  width="300" height="200" style='display:inline-block;margin:5px' :src="posterimg" alt="">
				</el-dialog>
			</el-form-item>	
			<el-form-item label='banner跳转链接:'>
				<el-input required v-model="form.link" class='content-val'></el-input>
			</el-form-item>	
			<div class="add-build">
				<el-button type="primary" :disabled='btnFlag' @click="onSubmit">立即创建</el-button>
			</div>	
		</el-form>
	</div>
</template>
<script>
	export default {
		data (){
			return {
				buildId:null,
				posterimg:null,
				btnFlag:false,
				dialogVisible:false,
				bannerVisible:false,
				RTRoot:process.env.API_ROOT_URL,
				form:{
					building:null,
					build:null,
					name:null,
					link:"http://"
				},
				imageUrl:null

			}
		},
		methods:{
			getBuildingList(){
				let self = this
		     	self.$http.post('marketweb/build/querybuilds',{
		     		keyAdmin:self.$store.state.keyAdmin
		     	}).then(response=>{
		     		if(response.body.code == 200){
		     			self.form.building = response.body.buildList
		     			self.buildId = self.form.building[0].buildIdStr
		     			self.form.build = self.form.building[0].buildIdStr
		     		}else{
		     			self.$message.error('获取建筑物信息失败')
		     		}
		     		
		     	},response=>{
		     		self.$message.error('建筑物请求失败')
		     	})
			},

			showDialog(){
				this.dialogVisible = true;
			},

			handleSuccess(response, file, fileList){
		        this.bannerVisible = true;
		        this.posterimg = response.path
		    },


		     handleBeforePost(file){
		         const isJPG = file.type === 'image/jpg';
		         const isJPEG = file.type === 'image/jpeg';
		         const isLt2M = file.size / 1024 / 1024 < 1;
		        if (!isLt2M) {
		          this.$message.error('上传头像图片大小不能超过1M!');
		        }
		         if (!isJPG && !isJPEG) {
		                this.$message.error('仅支持上传JPG格式!');
		            }

		          return (isJPG || isJPEG)  && isLt2M;
		      },

			onSubmit(){
				let self = this;
				 this.$confirm('确定要保存信息?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'info'
		        }).then(() => {
		          this.$http.post('marketweb/actionbanner/save',{
					keyAdmin:this.$store.state.keyAdmin,
					buildId:this.form.build,
					bannerImage:this.posterimg,
					path:this.form.link,
					bannerName:this.form.name
				}).then(response=>{
					if(response.body.code == 200){
						this.$message({
							message:'成功添加',
							type:'success'
						})
						this.btnFlag = true
						setTimeout(function(){
							self.$router.go(-1)
						},1000)
					}else{
						this.$message.error(response.body.msg)
					}
				})
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          });          
		        });
				
				
			}
		},

		created(){
			this.getBuildingList()
		}

	}
</script>
<style scoped>
	.title-left{
		font-size: 18px;
		color: #4fabe7;
		padding: 0 10px 15px;
		border-bottom:2px solid #169bd5;
	}
	.banner-form{
		margin-top: 15px;
	}
	.upload-img{
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		font-size: 30px;
		border: 1px dotted #ddd;
	}
	.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .content-val{
  	width: 400px;
  }
  .add-build{
  	text-align: center;
  }
</style>